<script setup lang="ts">
const props = defineProps<{
  modelValue?:any
}>();
onMounted(()=>{
  setTimeout(()=>{
    document.querySelectorAll('input').forEach((input)=>input.removeAttribute('readonly'))
  },500)
})
</script>

<template>
  <input
      class="input"
      readonly
      :value="props.modelValue"
      @input="$emit('update:modelValue',(($event.target as HTMLInputElement).value))"
  />
</template>

<style lang="scss" scoped>
input.input{
  @apply border border-gray-200 p-2 rounded placeholder:text-sm text-gray-700
  outline-none w-full  ring-offset-2 ring-pink-500 focus:ring-2 focus:border-white
  duration-300;
}
</style>